文章同步更新在 CodeFictionist
在後面幾天來介紹那些有時會在其他網站常見的酷炫特效 (ex. 浮動粒子、按鈕彈跳效果...等) 之前,需要先花個幾天談一下 CSS 動畫的基礎,這樣才能更好適應後面部份的內容。
animation
與 @keyframes
基本上,一個 CSS 的動畫由兩個部分所組成:animation
屬性和 @keyframes
規則。
我們可以先來看一小段程式碼:
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
.element {
animation: move 2s infinite alternate;
}
animation
我們先來解析上面的 animation: move 2s infinite alternate;
到底做了什麼事。:
@keyframes
建立的關鍵影格,這點後面再說。2s
代表 animation-duration,簡單來說就是一個動畫的持續時間。infinite
代表 animation-iteration-count,定義動畫重複的次數,在這裡就表示動畫不限次數一直執行。alternate
代表 animation-direction,是用來定義動畫執行一次後是否反方向執行。所以在這個範例中我們用到了關鍵影格、animation-duration、animation-iteration-count 以及 animation-direction,但其實 animation
遠不只這些屬性。
其它 animation
屬性還有:
running
或 paused
,簡而言之就是要動畫執行還是先暫停。ease
。
ease
:緩慢開始,然後加速,然後緩慢結束。linear
:動畫從頭到尾都是以相同的速度執行。ease-in
:緩慢開始,然後加速。ease-out
:加速,然後緩慢結束。ease-in-out
:緩慢開始,中間加速,然後緩慢結束。none
、forwards
、backwards
或 both
,預設狀態下會是 none
。
none
:動畫結束後,元素會回到原本的狀態。forwards
:動畫結束後,元素會保持在動畫的最後一個影格。backwards
:動畫開始前,元素會先套用第一個影格的樣式。both
:結合 forwards
和 backwards
的效果。有些人會有疑問,animation-fill-mode 的 none
跟 backwards
測試起來好像沒有差別,在最後一幀的時候位置都是一樣的啊!
但請注意我們範例中的元素背景色,none
在動畫延遲的時間內 (注意範例中我設定動畫啟動延遲 5 秒),背景色會是預設的黃色,而 backwards
則會是第一幀的粉藍色,所以關於 none
跟 backwards
的差異其實主要體現在設定 animation-delay 後的表現。
@keyframes
前述有講到在 animation
引入了一個 move 這個關鍵影格,這個關鍵影格是透過 @keyframes
來定義的。
什麼是關鍵影格?
讓我們再看看最一開始那段 code:
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
.element {
animation: move 2s infinite alternate;
}
我們用 @keyframes
定義了一個名為 move 的關鍵影格,在這個關鍵影格中,move 把 2 秒的 animation-duration 給拆成了兩個關鍵影格點,分別是 from
包起來的區塊以及 to
包起來的區塊。
from
代表動畫的開始狀態,而 to
代表動畫的結束狀態,講白話一點,這裡 move 做的事就是讓元素在 2 秒內從 left: 0;
移動到 left: 200px;
,這就是一個最基本的關鍵影格,與 animation
一同構成一個最基本的動畫。
除了 from
和 to
之外,我們還可以使用百分比來定義關鍵影格,實際上 from
和 to
就是 0%
和 100%
的簡寫。
至於百分比是誰的百分比呢?
其實這個百分比就是 animation-duration 的百分比。
以上述 2 秒的例子來看, 0%
就是 0s
,100%
就是 2s
,以此類推 50%
就是 1s
。
我們來為上述例子添加一個在 50%
變成粉紅色的關鍵影格:
@keyframes move {
from {
left: 0;
}
50% {
background-color: pink;
}
to {
left: 200px;
}
}
現在我們的藍色球球會在 1 秒的時候變成粉紅色啦,這就是使用百分比來定義關鍵影格的效果。